<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>EaselJS Example: Mask test file.</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js"></script>

	<script src="../lib/easeljs-NEXT.js"></script>
	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

<script id="editable">
	var img, star, stage;
	var scale;
	var angle;
	function init() {
		examples.showDistractor();

		//wait for the image to load
		img = new Image();
		img.onload = handleImageLoad;
		img.src = "../_assets/art/flowers.jpg";
		angle = 0;
	}

	function handleImageLoad() {
		examples.hideDistractor();

		//find canvas and load images, wait for last image to load
		var canvas = document.getElementById("testCanvas");

		// create a new stage and point it at our canvas:
		stage = new createjs.Stage(canvas);

		// masks can only be shapes.
		star = new createjs.Shape();
		// the mask's position will be relative to the parent of its target:
		star.x = img.width / 2;
		star.y = img.height / 2;
		// only the drawPolyStar call is needed for the mask to work:
		star.graphics.beginStroke("#FF0").setStrokeStyle(5).drawPolyStar(0, 0, img.height / 2 - 15, 5, 0.6).closePath();

		var bg = new createjs.Bitmap(img);
		// blur and desaturate the background image:
		bg.filters = [new createjs.BlurFilter(2, 2, 2), new createjs.ColorMatrixFilter(new createjs.ColorMatrix(0, 0, -100, 0))];
		bg.cache(0, 0, img.width, img.height);
		stage.addChild(bg);

		var bmp = new createjs.Bitmap(img);
		stage.addChild(bmp);
		bmp.mask = star;

		// note that the shape can be used in the display list as well if you'd like, or
		// we can reuse the Graphics instance in another shape if we'd like to transform it differently.
		stage.addChild(star);

		createjs.Ticker.addEventListener("tick", tick);
	}

	function tick(event) {
		star.rotation += 5;
		star.scale = 1.5 + Math.sin(angle) * 3;
		stage.update(event);
		angle += 0.025;
	}
</script>
</head>

<body onload="init();">
<header class="EaselJS">
	<h1>Masks</h1>

	<p>Demonstrates using <code>DisplayObject.mask</code>. Note that the
		vector <code>Shape</code> that defines the mask can also be placed on
		the display list (in this case the star shape is used both a mask, and
		the yellow border)</p>
</header>

<div>
	<canvas id="testCanvas" width="960" height="400"></canvas>
</div>
</body>
</html>
